<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 继续商品列表,加个 新增和删除的按钮,新增点击后，会自动加上最后一个商品.
        删除点击后，会自动减去最后一个商品 -->
        <div id="app">
            <ul>
                <li v-for="i,index,k in list">
                    <div v-if="i.status">
                        <div>{{index+1}}</div>
                        <div>{{i.name}}</div>
                        <div>{{i.price}}</div>
                        <div><img width="200" v-bind:src="i.image" alt=""></div>
                    </div>
                    <div v-else-if="i.status===false">
                        <div>我是真的为false</div>
                    </div>
                    <div v-else>
                        我不是真的为false
                    </div>
                </li>
            </ul>
            <span @click="add">新增</span>
            <span @click="delet">删除</span>
        </div>
</body>
<script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data:()=>{
            return{
                list:[
                    {
                        name:'辣条',
                        price:'￥3',
                        image:'https://cdn.178hui.com/upload/1920/2022/0908/08321891379.jpg',
                        status:1,
                    },
                    {
                        name:'蛋糕',
                        price:'￥37',
                        image:'https://img2.baidu.com/it/u=267566466,1793978152&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889',
                        status:1,
                    },
                    {
                        name:'薯片',
                        price:'￥8',
                        image:'https://img0.baidu.com/it/u=3899308607,3098058352&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=721',
                        status:1,
                    },
                ]              
            }
        },
        methods:{
            add:function(even){
                console.log(even)
                console.log()
                this.list.push(this.list[(this.list.length)-1])
            },
            delet:function(even){
                console.log(even)
                this.list.splice((this.list.length)-1,1)
                // this.list.pop() 
            }
            
        }
    }).mount("#app") 
</script>
</html>